<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        body{
            margin: 0;
        }
        #box{
            height: 2000px;
        }
        .right{
            float: right;
            position: relative;
            width: 100px;
            height: 120px;
        }
        .right img{
            position: absolute;
            right: 0;
        }
        .right span{
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: white;
            font-weight: bold;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            cursor: pointer;
            /*display: none;*/
            /*visibility: hidden;*/
            opacity: 0;
        }
        .right .top{
            position: absolute;
            right: 0px;
            top: 0;
            background-color: #d03f42;
        }
        .right .buttom{
            position: absolute;
            right: 0px;
            bottom: 0;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="right">
            <img src="../img/scroll.png" alt="">
            <span class="top">返回顶部</span>
            <span class="buttom">转到底部</span>
        </div>
    </div>
</body>
</html>
<script>
    // 出现文字
    $('.right').hover(function(){
        $(this).find('span').css({opacity:1});

    },function(){
        $(this).find('span').css({opacity:0});
    })

    // 点击之后回到顶部或底部
    $('.right .top').click(function(){
        var scrollTop=$(document).scrollTop();
        $('html body').animate({scrollTop:0},100);
        console.log(screenTop);
    });
    $('.right .buttom').click(function(){
        // var scrollTop=$(document).scrollTop();
        var bodyh=$(document).height();
        // console.log(scrollTop);
        // console.log(bodyh);
        $('html body').animate({scrollTop:bodyh},100);
    })
    
    // 固定在右边中间位置
    setright();
    function setright(){
        var top=($(window).height()-$('.right').height())/2+$(document).scrollTop();
        $('.right').css({top:top});
    }
    // 当页面尺寸发生变换，重新计算尺寸
    $(window).scroll(function(){
        setright();
    })

</script>